import React from "react";
import "styles/data-center/report/graphic-report/report-wrapper.scss"
import { Spin, Col } from "antd";
import Condition from 'components/condition'
import noDataImg from "images/data-center/report-no-data.png";
import { messages } from "share/common";
import WaterMark from "components/water-mark";

const { If, Else } = Condition;
const { PropTypes, Component } = React;
/**
 * 报表wrapper
 *
 * 主要为了提供title和utils，以及计算宽度
 */

export default WrappedComponent => {
  class ReportWrapper extends Component {

    state = {
      width: 0
    };

    constructor(props) {
      super(props);
    }

    componentDidMount = () => {
      this.setWidth();
      window.addEventListener('resize', this.setWidth)
    };

    componentWillReceiveProps = (nextProps) => {
      if (this.props !== nextProps) {
        this.setWidth();
      }
    };

    componentWillUnmount = () => {
      window.removeEventListener('resize', this.setWidth)
    };

    setWidth = () => {
      let { props } = this;
      let { cols, customCols, fullScreenMode, displayMode } = props;
      // 以下计算方式得到的width会有4位小数，到页面上就四舍五入了，导致一行的报表宽度加起来可能会大于总宽而换行，故改用了antd的栅格布局
      // let width = cols * 0.3333 * (document.querySelector('.helios-content').offsetWidth);
      // 图表加了margin，计算宽度的时候要减去margin的宽度
      if (customCols) {
        if (fullScreenMode) {
          let width = document.querySelector('.helios-main').offsetWidth - 216;
          this.setState({width})
        } else {
          if (displayMode) {
            let totalWidth = document.querySelector('.custom-report-container').offsetWidth - 80;
            let width = (customCols / 24) * totalWidth;
            if (customCols === 24)
              width += 28;
            this.setState({width})
          } else {
            let totalWidth = document.querySelector('.helios-main').offsetWidth - 196;
            let width = (customCols / 24) * totalWidth;
            if (customCols === 24)
              width += 28;
            this.setState({width})
          }
        }
      } else {
        let totalWidth = document.querySelector('.helios-content').offsetWidth - 55
        let width = (cols / 24) * totalWidth - 6;
        this.setState({width})
      }
    };

    render() {
      let { props, state } = this;
      let { title, utils, loading, dataLength, hideBoxShadow, isSubHead, waterMark, desc, cols, failedGetData } = props;
      let { width } = state;
      let style = {};
      if (hideBoxShadow) {
        style.boxShadow = 'none';
      }
      let headClass = 'report-wrapper-head';
      if (isSubHead) {
        headClass += ' sub-head'
      }

      return (
        <Col span={cols} className='report-wrapper' style={style}>
          {title && <div className={headClass}>
            <div className="report-wrapper-title">
              {typeof title === 'function' ? title() : title}
            </div>
            <div className="report-wrapper-options">
              {utils}
            </div>
          </div>}
          <Spin spinning={loading}>
            <div className='report-container'>
              {waterMark && <WaterMark/>}
              <Condition>
                <If value={dataLength && width}>
                  <WrappedComponent
                    width={width}
                    {...props}/>
                </If>
                <Else>
                  <div className="empty-content" style={style}>
                    <img className='empty-content-image'
                         onMouseDown={e=>e.preventDefault()}
                         src={noDataImg}/>
                    <p className="empty-content-desc">
                      {failedGetData ? messages('common-1.key351')/*数据获取失败*/ : messages('common.empty.text')/*暂无数据*/}
                    </p>
                  </div>
                </Else>
              </Condition>
            </div>
          </Spin>
        </Col>
      );
    }

    static propTypes = {
      title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
      cols: PropTypes.number,
      utils: PropTypes.any,
      loading: PropTypes.bool,
      dataLength: PropTypes.number,
      hideBoxShadow: PropTypes.bool,
      isSubHead: PropTypes.bool,
      waterMark: PropTypes.bool,
    };

    static defaultProps = {
      cols: 1,
      loading: false,
      waterMark: true
    };
  }

  return ReportWrapper
};
